<template>
	<view class="profile-container">
		<!-- 顶部设置按钮 -->
		<view class="header">
			<view class="header-left">
				<text class="frame-text">Frame 798</text>
			</view>
			<view class="header-right">
				<text class="settings-icon" @tap="openSettings">⚙️</text>
			</view>
		</view>
		
		<!-- 用户信息区域 -->
		<view class="user-section">
			<view class="user-avatar">
				<image class="avatar-img" :src="avatarSrc" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="user-name">{{userInfo ? userInfo.username : 'Yaqi Yang'}}</text>
				<text class="user-level">{{userInfo ? userInfo.level : '高级会员'}}</text>
			</view>
		</view>
		
		<!-- 会员课程区域 -->
		<view class="member-section">
			<view class="member-header">
				<text class="member-title">会员课程</text>
				<view class="member-icon">
					<text class="gift-icon">🎁</text>
				</view>
			</view>
			
			<!-- 统计信息 -->
			<view class="stats-container">
				<view class="stats-card">
					<text class="stats-label">完成课程</text>
					<view class="stats-content">
						<text class="stats-number">13h</text>
						<text class="stats-unit">25min</text>
					</view>
					<text class="stats-total">Frame 799</text>
				</view>
				
				<view class="stats-divider"></view>
				
				<view class="stats-card">
					<text class="stats-label">学习时长</text>
					<view class="stats-content">
						<text class="stats-number">8756</text>
						<text class="stats-unit">分钟</text>
					</view>
					<text class="stats-total">累计学习</text>
				</view>
			</view>
		</view>
		
		<!-- 快捷功能区域 -->
		<view class="quick-actions">
			<view class="action-item" @tap="goToMyCourses">
				<text class="action-icon">📚</text>
				<text class="action-text">我的课程</text>
			</view>
			<view class="action-item" @tap="goToProgress">
				<text class="action-icon">📊</text>
				<text class="action-text">学习进度</text>
			</view>
			<view class="action-item" @tap="goToFavorites">
				<text class="action-icon">❤️</text>
				<text class="action-text">我的收藏</text>
			</view>
			<view class="action-item" @tap="goToHistory">
				<text class="action-icon">🕐</text>
				<text class="action-text">学习历史</text>
			</view>
			<view class="action-item" @tap="logout">
				<text class="action-icon">🚪</text>
				<text class="action-text">退出登录</text>
			</view>
			<view class="action-item" @tap="openSettings">
				<text class="action-icon">⚙️</text>
				<text class="action-text">设置</text>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @tap="goToHome">
				<text class="nav-icon">🏠</text>
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" @tap="goToPractice">
				<text class="nav-icon">🎯</text>
				<text class="nav-text">练习</text>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">👤</text>
				<text class="nav-text">个人</text>
			</view>
		</view>
	</view>
</template>

<script>
import auth from '../../utils/auth.js'
import images from '../../utils/images.js'

export default {
	name: 'Profile',
	data() {
		return {
			// 页面数据
			avatarSrc: images.bgLogo, // 使用统一的图片管理
			userInfo: null
		}
	},
	onLoad() {
		// 获取用户信息
		this.userInfo = auth.getUserInfo();
	},
	methods: {
		openSettings() {
			uni.showToast({
				title: '打开设置',
				icon: 'none'
			});
		},
		goToHome() {
			uni.navigateTo({
				url: '/pages/home/home'
			});
		},
		goToPractice() {
			uni.navigateTo({
				url: '/pages/practice/practice'
			});
		},
		goToMyCourses() {
			uni.showToast({
				title: '我的课程',
				icon: 'none'
			});
		},
		goToProgress() {
			uni.showToast({
				title: '学习进度',
				icon: 'none'
			});
		},
		goToFavorites() {
			uni.showToast({
				title: '我的收藏',
				icon: 'none'
			});
		},
		goToHistory() {
			uni.showToast({
				title: '学习历史',
				icon: 'none'
			});
		},
		logout() {
			uni.showModal({
				title: '确认退出',
				content: '您确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 使用认证工具清除登录状态
						auth.clearLoginStatus();
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
						
						// 跳转到登录页面
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.profile-container {
	background: linear-gradient(135deg, #FFE4E6 0%, #FFF0F2 100%);
	min-height: 100vh;
	padding: 0 30rpx 160rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 80rpx 0 40rpx;
}

.frame-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.settings-icon {
	font-size: 40rpx;
	color: #FF6B9D;
}

.user-section {
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.2);
}

.avatar-img {
	width: 100%;
	height: 100%;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 42rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.user-level {
	font-size: 28rpx;
	color: #FF6B9D;
	display: block;
}

.member-section {
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.1);
}

.member-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.member-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.member-icon {
	width: 60rpx;
	height: 60rpx;
	background: #FFE4E6;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gift-icon {
	font-size: 32rpx;
}

.stats-container {
	display: flex;
	align-items: center;
}

.stats-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stats-label {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 10rpx;
	display: block;
}

.stats-content {
	display: flex;
	align-items: baseline;
	margin-bottom: 8rpx;
}

.stats-number {
	font-size: 48rpx;
	font-weight: bold;
	color: #FF6B9D;
}

.stats-unit {
	font-size: 28rpx;
	color: #FF6B9D;
	margin-left: 5rpx;
}

.stats-total {
	font-size: 24rpx;
	color: #666666;
	display: block;
}

.stats-divider {
	width: 2rpx;
	height: 100rpx;
	background: #E5E5E5;
	margin: 0 40rpx;
}

.quick-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40rpx;
	padding: 0 10rpx;
}

.action-item {
	width: 40%;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.1);
	margin-bottom: 20rpx;
}

.action-icon {
	font-size: 44rpx;
	margin-bottom: 15rpx;
}

.action-text {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFFFF;
	display: flex;
	padding: 20rpx 0;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10rpx 0;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
	color: #FF6B9D;
}

.nav-icon {
	font-size: 44rpx;
	margin-bottom: 8rpx;
	color: #999999;
}

.nav-text {
	font-size: 22rpx;
	color: #999999;
}
</style> 